﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>视频压缩视频</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>


<div class="con_wrap con_wrap_4 wrap_show" lay-filter="demo">

    <div class="motor_hook">

        <div class="motor_wrap">
            <div class="man">
                <div class="head"></div>
                <div class="body"></div>
            </div>
            <div class="motor">
                <div class="wheel_front"></div>
                <div class="wheel_back"></div>
                <div class="motor_body"></div>
                <div class="motor_handle"></div>
                <div class="motor_pipe">
                    <i class="pipe"></i>
                    <i class="smoke smoke_1"></i>
                    <i class="smoke smoke_2"></i>
                </div>
            </div>
        </div>

        <div class="motor_hook">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test8" name="file"><i class="layui-icon"></i>上传视频</button>
            </div>
        </div>
    </div>


    <div class="tree_wrap">
        <span class="tree_1"><i></i></span>
        <span class="tree_2"><i></i></span>
    </div>
    <div class="wording_wrap">
        <div class="wording wording_4"></div>
    </div>

</div>
<script>
    var key = '';
    layui.use(['upload', 'element'], function () {
        var $ = layui.jquery,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;

        upload.render({
            elem: '#test8'
            , url: 'http://localhost:8080/voideoFilePush' //改成您自己的上传接口
            , accept: 'video' //视频
            , done: function (res) {
                layer.msg('上传成功');
                if (res != null) {
                    key = res
                    layer.open({
                        content: '<button type="button" id ="downloads" onclick="downloadFile()" data-method="notice">下载压缩完成视频</button>'
                    });
                } else {
                    layer.msg("视频上传失败")
                }
            }
            , progress: function (n, elem) {
                var percent = n + '%' //获取进度百分比
                if (n % 5 == 0) {
                    layer.msg("正在上传中，进度" + percent);
                }
                if (n == 100) {
                    layer.msg('文件上传成功，正在压缩请稍后', {time: 2000});
                }

            }

        });
    });

    function downloadFile() {
        if (key != '') {
            var fileName = key.fileOutName;
            console.log(fileName)
            window.open('http://127.0.0.1:8080/getZipVoide?fileName=' + fileName)
        }
    }
</script>


</body>
</html>
